<template>
  <div class="navbar-footer box">
    <div class="foot-list" @click="linkTo(item.path)"  :class="{active:item.path == activePath}" v-for="(item,index) in menuList" :key="index">
      <div class="icon"></div>
      <div class="title">{{item.name}}</div>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
          menuList:[
            {name:'首页',path:'/'},
            {name:'活动',path:'/activity'},
            {name:'我的',path:'/me'},
          ],
          activePath:''
      };
    },
    components: {},
    mounted() {
      this.activePath = this.$router.currentRoute.path
    },
    methods: {
      linkTo(link){
         this.$router.push(link)
      }
    }
  };
</script>
<style lang="less">
  .navbar-footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: .98rem;
    font-size: .24rem;
    color: #111;
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .1);
    .foot-list{
      flex: 1;
      -webkit-box-flex: 1;
      &:active{
        background-color: #e1e1e1;
      }
      &.active{
        .icon{
          background-image: url(../../images/home_selected.png);
        }
        .title{
          color: #0063AE;
        }
      }
      .icon{
        background-image: url(../../images/home.png);
        background-size:100%;
        width: .46rem;
        height: .39rem;
        margin: .14rem auto .03rem;
      }
      &:nth-child(2){
        &.active{
          .icon{
            background-image: url(../../images/activity_selected.png);
          }
        }
        .icon{
          background-image: url(../../images/activity.png);
          background-size:100%;
          width: .42rem;
          height: .41rem;
          margin: .14rem auto .03rem;
        }       
      }
      &:nth-child(3){
        &.active{
          .icon{
            background-image: url(../../images/me_selected.png);
          }
        }
        .icon{
          background-image: url(../../images/me.png);
          background-size:100%;
          width: .35rem;
          height: .39rem;
          margin: .14rem auto .03rem;
        }       
      }
      .title{
        text-align: center;
      }
    }
  }
</style>